<template>
    <div class="up-paw-container">
       <div>
          <span class="title">原密码:</span><input type="password" v-model="opaw" />
       </div>
       <div>
          <span  class="title">新密码:</span><input type="password" v-model="paw" />
       </div>
       <div>
          <span  class="title">确认密码:</span><input type="password" v-model="ispaw" /><span v-show="isp">两次输入密码不一样</span>
       </div>
       <div>
            <button @click="onSubmit">提交</button>
       </div>
    </div>
</template>
<script>
import md5 from 'md5';
export default {
    data(){
        return{
            opaw:'',
            paw:'',
            ispaw:''
        }
    },
    methods:{
       async onSubmit(){
           //向服务器提交修改密码
           const result = await this.$axios.put("/api/user/userUpdata",{
               opaw:md5(this.opaw),
               paw: md5(this.paw)
            }) 
            if(result =='404'){
                 this.$message({
                      showClose: true,
                      message: '原密码不对！',
                      type: 'error'
                });
                
            }else if(result){
                 this.$message({
                      showClose: true,
                      message: '修改成功！',
                      type: 'success'
                });
            }else{
                 this.$message({
                      showClose: true,
                      message: '修改失败！',
                      type: 'error'
                });
            }
       },
       ispaws(){

       }
    },
    computed:{
        isp(){
            return this.paw !== this.ispaw;
        }
    }
    
}
</script>
<style lang="less"  >
    .up-paw-container{
        padding: 30px;
        div{
            width: 600px;
            padding: 10px;
            input{
                width: 200px;
                height: 30px;
                border: 1px solid #939496;
                border-radius: 5px;
                margin-right: 5px;
            }
            span{
                display: inline-block;
                width: 80px;
                text-align: right;
                padding-right: 3px;
                white-space: nowrap;
            }
            button{
                cursor: pointer;
                padding: 8px 8px;
                width: 70px;
                transform: translateX(150px);
                border-radius: 6px;
                border: 0px;
                color: #fff;
                 background-color:#409eff;
            }
        }
    }
</style>